@model Netnr.Blog.Domain.Gist

@{
    ViewData["Title"] = Model.GistRemark;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-12 my-3 text-right">
            <div class="float-left">
                <i class="fa fa-user fa-fw fa-2x text-muted mr-sm-2"></i>
            </div>
            <div class="float-left text-left">
                <a href="/gist/user/@Model.Uid">@Model.Spare3</a>&nbsp;/
                <a href="/gist/code/@Model.GistCode"><b>@Model.GistFilename</b></a>
                <div>
                    <small class="text-muted">@Model.GistCreateTime.Value.ToString("yyyy-MM-dd HH:mm")</small>
                </div>
                <small>@Model.GistRemark</small>
            </div>

            @{
                var hc = ViewContext.HttpContext;
                bool IsLogin = hc.User.Identity.IsAuthenticated;
                var uinfo = Netnr.Blog.Web.Apps.LoginService.Get(ViewContext.HttpContext);
            }
            @if (IsLogin && Model.Uid == uinfo.UserId)
            {
                <a class="btn btn-outline-secondary btn-sm mr-sm-2" href="/gist/code/@Model.GistCode/edit">
                    <i class="fa fa-pencil"></i>&nbsp;Edit
                </a>
                <a class="btn btn-outline-danger btn-sm" href="/gist/code/@Model.GistCode/delete" onclick="return confirm('Are you positive you want to delete this Gist?')">
                    <i class="fa fa-trash-o"></i>&nbsp;Delete
                </a>
            }
        </div>

        <div class="col-md-12" id="viewname">
            <div class="card">
                <div class="card-header p-2">
                    <i class="fa fa-fw fa-spinner fa-spin" id="faicon"></i>&nbsp;
                    <a href="#viewname">@Model.GistFilename</a>
                    <small class="ml-3 badge badge-warning">@Model.GistLanguage</small>
                    <div class="btn-group float-right">
                        @if (Model.GistLanguage == "shell" && Model.GistFilename.EndsWith(".cast"))
                        {
                            <a href="javascript:void(0)" class="btn btn-outline-secondary py-0 px-1" data-toggle="modal" data-target="#aptip">说明</a>

                            <div class="modal fade" id="aptip">
                                <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">asciinema player</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <ul>
                                                <li>
                                                    快捷键<ul>
                                                        <li><code>space</code> 播放 / 暂停</li>
                                                        <li><code>f</code> 全屏切换</li>
                                                        <li><code>←</code> / <code>→</code> 后退 5 秒 / 前进 5 秒</li>
                                                        <li><code>0</code>, <code>1</code>, <code>2</code> ... <code>9</code> 跳到 0%, 10%, 20% ... 90%</li>
                                                        <li><code>&lt;</code> / <code>&gt;</code> 减少 / 增加 播放速度</li>
                                                    </ul>
                                                </li>
                                                <li>可选中拷贝视频内容</li>
                                                <li>基于文本的终端录屏</li>
                                                <li><a href="https://github.com/asciinema/asciinema-player">https://github.com/asciinema/asciinema-player</a></li>
                                            </ul>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-danger" data-dismiss="modal">确定</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                        else
                        {
                            <a href="/gist/raw/@Model.GistCode" class="btn btn-outline-secondary py-0 px-1">Raw</a>
                            <a href="/gist/raw/@Model.GistCode/download" class="btn btn-outline-secondary py-0 px-1">Download</a>
                        }
                    </div>
                </div>
                @if (Model.GistLanguage == "markdown")
                {
                    @Html.Raw(Netnr.SharedApp.QuoteTo.Html("netnrmd.css,netnrmd.js,monaco-editor"))

                    <div class="markdown-body p-2">@Model.GistContent</div>
                    <script>
                        var mb = $('div.markdown-body');
                        mb.html(netnrmd.render(mb.html()));

                        $('#faicon').removeClass('fa-spinner fa-spin').addClass('fa-file-code-o');
                    </script>
                }
                else if (Model.GistLanguage == "shell" && Model.GistFilename.EndsWith(".cast"))
                {
                    <div class="mt-3 mb-2">
                        <asciinema-player font-size="16" poster="npt:0:44" title="@Model.GistFilename" author="@Model.Spare3" author-img-url="/favicon.ico" cols="210" rows="40" src="/gist/raw/@Model.GistCode/download"></asciinema-player>
                    </div>
                    <script>
                        var ap = $('asciinema-player');
                        ap.attr("cols", Math.max(40, ($("#viewname").width() / 9.1).toFixed(0)));
                        ap.attr("rows", Math.max(10, (($(window).height() - 120) / 21).toFixed(0)));
                        $('#faicon').removeClass('fa-spinner fa-spin').addClass('fa-file-code-o');

                        setTimeout(function () {
                            ap[0].play();
                        }, 1500)
                    </script>
                    @Html.Raw(Netnr.SharedApp.QuoteTo.Html("asciinema-player.css,asciinema-player.js"))
                }
                else
                {
                    <pre class="card-body monaco-editor vcln markdown-body" style="height:@((22*Model.GistRow+9).ToString()+"px");" data-lang="@Model.GistLanguage" data-theme="@Model.GistTheme">@Model.GistContent</pre>
                    @Html.Raw(Netnr.SharedApp.QuoteTo.Html("monaco-editor"))

                    <script>
                        var editor;
                        require(['vs/editor/editor.main'], function () {
                            var gc = $('pre.vcln');
                            var cv = htmlDecodeByRegExp(gc.html());
                            gc.html('');
                            editor = monaco.editor.create(gc[0], {
                                value: cv,
                                language: gc.attr('data-lang'),
                                automaticLayout: true,
                                roundedSelection: false,
                                scrollBeyondLastLine: false,
                                contextmenu: false,
                                scrollbar: {
                                    verticalScrollbarSize: 0,
                                    horizontalScrollbarSize: 9,
                                    alwaysConsumeMouseWheel: false
                                },
                                fontSize: 16,
                                readOnly: true,
                                theme: gc.attr('data-theme'),
                                minimap: {
                                    enabled: false
                                }
                            });
                            gc.css('padding-left', 0);
                            $('#faicon').removeClass('fa-spinner fa-spin').addClass('fa-file-code-o');
                        });
                    </script>
                }
            </div>
        </div>

        <!--同步镜像-->
        <div class="col-md-12 mt-3">
            @if (!string.IsNullOrWhiteSpace(Model.Spare1))
            {
                <div title="GitHub 镜像">
                    <i class="fa fa-fw fa-github"></i>
                    <a target="_blank" href="https://gist.github.com/netnr/@Model.Spare1">https://gist.github.com/netnr/@Model.Spare1</a>
                </div>
            }
            @if (!string.IsNullOrWhiteSpace(Model.Spare2))
            {
                <div title="Gitee 镜像">
                    <i class="fa fa-fw fa-git"></i>
                    <a target="_blank" href="https://gitee.com/netnr/codes/@Model.Spare2">https://gitee.com/netnr/codes/@Model.Spare2</a>
                </div>
            }
        </div>
    </div>
</div>